<template>
  <div>
    <header class="header">
      <!-- 最顶部 -->
      <div class="header_top">
        <div class="wrap">
          <el-col :span="12">
            <div class="grid-content bg-purple"><a href="">您好,化塑云商</a></div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <el-col :span="3" :offset="11" style='padding-right: 2px'>
                <div class="grid-content bg-purple">
                  <router-link to='/companycenter'>企业中心</router-link>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  服务热线:400-800-8900
                </div>
               </el-col>
              <el-col :span="3" style='text-align: right'>
                <div class="grid-content bg-purple">
                  <a href="javascript:">网站导航</a>
                </div>
              </el-col>
            </div>
          </el-col>
        </div>
      </div>
      <!-- logo -->
      <div class="wrap ">
        <el-row :gutter="20" class='header_logo clearfixed'>
          <el-col :span="3">
            <div class="grid-content bg-purple"><router-link to='/'>logo</router-link></div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple logo_font">
              <img src="../assets/img/logo_ad.png" alt="">
            </div>
          </el-col>
          <el-col :span="10" class='logo_right'>
            <div class="grid-content bg-purple header_search">
              <form action="" method="get" id='search_form_1'>
                <ul class="clearfixed">
                  <li class="find_search " name='first' :class='{is_active_type:is_active_type=="first"}' v-on:click='searchType("first")'>找产品</li>
                  <li class="find_search" name="second" :class='{is_active_type:is_active_type=="second"}'  v-on:click='searchType("second")'>找客户</li>
                  <li class="find_search" name="third" :class='{is_active_type:is_active_type=="third"}'  v-on:click='searchType("third")'>找技术</li>
                </ul>
                <div class="clearfixed serach_wrap">
                  <input type="text" placeholder="请输入分类、牌号、厂商、公司" class="search_input_1">
                  <button class="search_btn" type="button" @click='searchBtn'>
                    <img src="../assets/img/search.png" alt="">
                  </button>
                </div>
              </form>
              <div class="search_content_list clearfixed">
                  <a href="javascript::" target='_blank' v-for='searchthing in searchList'>{{searchthing.productName}}</a>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class='header_tab' v-show='top_tag'>
          <el-col style='width:160px'>
            <div class="grid-content bg-purple header_left">贴心服务</div>
          </el-col>
          <el-col :span="20">
            <div class="grid-content bg-purple-light header_right">
              <ul class="clearfixed main_tab_wrap">
                  <li class="main_tag" name='/'>
                    <router-link to='/'  class='isactive_tag'><div class="grid-content bg-purple">首页</div></router-link>
                  </li>
                  <li class="main_tag" name='/autotrophy' >
                    <router-link to='/autotrophy'><div class="grid-content bg-purple-light">自营商城</div></router-link>
                  </li>
                  <li class="main_tag" >
                    <router-link to='/financial'>
                      <div class="grid-content bg-purple">塑云金融</div>
                    </router-link>
                  </li>
                  <li class="main_tag" name='first' :class='' v-on:click='searchType("first")'>
                    <router-link to='/customer'>
                      <div class="grid-content bg-purple-light">客户资源</div>
                    </router-link>
                  </li>
                  <li class="main_tag" name='first' :class='' v-on:click='searchType("first")'>
                    <router-link to='/technician'>
                      <div class="grid-content bg-purple">技术专家</div>
                    </router-link>
                  </li>
                  <li class="main_tag" name='first' :class='' v-on:click='searchType("first")'>
                    <router-link to='/information'>
                      <div class="grid-content bg-purple-light">资讯中心</div>
                    </router-link>
                  </li>
                  <li class="main_tag" name='first' :class='' v-on:click='searchType("first")'>
                    <router-link to='/auction'>
                      <div class="grid-content bg-purple-light">竞价专区</div>
                    </router-link>
                  </li>
                  <li class="main_tag" name='first' :class='' v-on:click='searchType("first")'>
                    <router-link to='/properties'>
                      <div class="grid-content bg-purple-light">物性库</div>
                    </router-link>
                  </li>
                </ul>
            </div>
          </el-col>
        </el-row>
      </div>
      
    </header>
    
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'header',
  data () {
    return {
      top_tag:true,
      // 搜索框顶部样式的改变
      is_active_type:'first',
      // 顶部导航
      isactive_tag : '/',
      // 搜索框底部的
      searchList:[],
    }
  },
  created(){
    // 企业中心,======>顶部导航消失
    var urlId = this.$route.path;
    if(urlId.indexOf('companycenter') >0){
      this.top_tag = false
    }

    // 顶部导航样式的修改
    var tag = this.$route.path;
    var tagName = $('.main_tab_wrap').find('li');
    for (var i = 0; i < tagName.length; i++) {
      var attrName = tagName[i];
    }
    
    var _this = this;
     // 搜索框底部内容
    axios.get('/api/seller')
    .then(function (data) {
      if(data.data.code == 0){
        _this.searchList = data.data.data.searchList.data;
        // console.log(_this.searchList);
      }else if(data.data.code == 400){

      }

    });
  },
  methods: {
    // 搜索框顶部条件的切换
    searchType(str){  
      this.is_active_type = str
      // console.log(str);
    },
    // 搜索
    searchBtn(){
      // console.log($('.search_input_1').val())
      if($('.search_input_1').val() != ''){
        $('.search_btn').attr('type','submit')
      }
    },
    // 顶部导航
    // mainTag(str){
    //   this.$router.push(str)
    //   this.isactive_tag = str;
    //   var wantid = this.$route;
    //   console.log(wantid,'dfsdf')
    // }
    // 

  }

}
</script>
<style scoped lang='scss'>
@import 'src/assets/scss/header';

</style>
